.host-ip-view {
	.host-labels {
		.host {
			cursor: pointer;
			user-select: none;

			rect {
				fill: var(--color-bg-2);
				stroke: var(--color-bg-1);
			}

			text {
				font-size: var(--text-md);
				fill: var(--color-text-2);
			}

			&.active {
				rect {
					fill: var(--color-5);
				}

				text {
					fill: var(--color-text-1);
				}
			}
		}
	}

	.ip-nodes {
		.ip {
			cursor: pointer;
			user-select: none;

			circle {
				r: 5;
				fill: var(--color-5);
				stroke: var(--color-bg-5);
			}

			text {
				fill: var(--color-text-2);
			}

			&.active {
				circle {
					fill: var(--color-5);
					stroke: var(--color-5);
				}

				text {
					fill: var(--color-5);
				}
			}
		}
	}

	.links {
		.line {
			filter: grayscale(1px);
			fill: none;
			stroke: var(--color-bg-4);

			&.active {
				opacity: 1;
				stroke: var(--color-5);
				stroke-width: 2px;
			}
		}
	}
}
